import { Component } from 'react';
import '../../css/upsiag.css'
const data = [
    {
        label: '线上活动',
        name: '线上活动',
        checked: true
    },
    {
        label: '推广类',
        name: '推广类',
        checked: false
    },
    {
        label: '线下活动',
        name: '线下活动',
        checked: false
    },
    {
        label: '品牌介绍',
        name: '品牌介绍',
        checked: false
    }
]
class Upsiag extends Component {
    // 基本数据
    state = {
        title: '前端前景技术发展交流',        //活动名称
        city: '北京',                       //城市
        start: '',                          //开始日期
        end: '',                            //日期结束
        telephone: '',                      //报名电话
        switch:'1',                         //允许电话沟通
        occupation: '',                     //目前职业
        sponsor: '1',                       //淘宝
        describe: '',                       //描述

    }
    // form
    formNav = (val) => {
        val.preventDefault()
    }
    // 活动名称
    activityName = (val) => {
        this.setState({
            title: val.target.value
        })
    }
    // 城市
    try = (val) => {
        this.setState({
            city: val.target.value
        })
    }
    // 日期开始
    start = (val) => {
        this.setState({
            start: val.target.value
        })
    }
    // 日期结束
    end = (val) => {
        this.setState({
            end: val.target.value
        })
    }
    // 报名电话
    telephone = (val) => {
        this.setState({
            telephone: val.target.value
        })
    }
    // 允许电话沟通
    switch = () => {
        console.log(1111);
    }
    // 目前职业
    occupation = (val) => {
        this.setState({
            occupation: val.target.value
        })
    }
    // 活动类型
    handleInput = (val, index) => {
        if (val.target.type === 'checkbox') {
            data[index].checked = !data[index].checked
        }

        let name = val.target.name
        let value = val.target.value
        this.setState({
            [name]: value
        })
    }
    //活动赞助商
    handleSex = (val) => {
        this.setState({
            sponsor: val.target.value
        })
    }
    // 描述
    describe = (val) => {
        this.setState({
            describe: val.target.value
        })
    }
    // 提交
    btn = () => {
        console.log(this.state);
        this.setState({

        })
    }


    render() {
        return (<>
            <div className='boxs'>
                <form onSubmit={this.formNav}>
                    {/* 活动名称 */}
                    <div className='ipt'>
                        活动名称 <input className='huo' value={this.state.title} onChange={this.activityName} type="text" />
                    </div>
                    {/* 城市 */}
                    <div className='chengshi'>
                        城市 <select className='sel' value={this.state.city} onChange={this.try}>
                            <option value="北京">北京</option>
                            <option value="上海">上海</option>
                            <option value="广州">广州</option>
                        </select>
                    </div>
                    {/* 日期 */}
                    <div className='dey'>
                        日期<input className='int' type="date" value={this.state.start} onChange={this.start} placeholder='开始日期' />—
                        <input className='int' type="date" value={this.state.end} onChange={this.end} placeholder='结束日期' />
                    </div>
                    {/* 报名电话 */}
                    <div className='chengshis'>
                        报名电话<input className='sels' type="text" placeholder='请输入电话号码' value={this.start.telephone} onChange={this.telephone} />
                    </div>
                    {/* 允许电话沟通 */}
                    <div className='dianhua'>
                        允许电话沟通<div className="switch-box">
                                        <input id="switchButton" type="checkbox" onChange={this.switch} className="switch" />
                                        <label htmlFor="switchButton"></label>
                                    </div>
                    </div>
                    {/* 目前职业 */}
                    <div className='chengshis'>
                        目前职业<input className='sels' type="text" placeholder='请输入职业' value={this.state.occupation} onChange={this.occupation} />
                    </div>
                    {/* 活动类型 */}
                    <div className='lei'>
                        活动类型
                        <div>
                            {
                                data.map((item, index) => {
                                    return (
                                        <label key={index}>
                                            <input type="checkbox" checked={item.checked} name={item.name} onChange={(val) => this.handleInput(val, index)} /> {item.label}
                                        </label>
                                    )
                                })
                            }
                        </div>

                    </div>
                    {/* 活动赞助商 */}
                    <div className='zan'>
                        活动赞助商
                        <div>
                            <label>
                                <input type="radio" value='1' checked={this.state.sponsor === '1'} onChange={this.handleSex} /> 淘宝
                            </label>
                            <label>
                                <input type="radio" value='2' checked={this.state.sponsor === '2'} onChange={this.handleSex} /> 京东
                            </label>
                        </div>
                    </div>
                    {/* 描述 */}
                    <div className='miao'>
                        描述
                        <div>
                            <textarea wrap='6' cols='20' placeholder='输入描述内容' value={this.state.describe} onChange={this.describe} />
                        </div>
                    </div>
                    {/* 按钮 */}
                    <div className='but'>
                        <button className='btn' onClick={this.btn}>提交</button>
                        <button className='delss'>重置</button>
                    </div>
                </form>
            </div>
        </>
        );
    }
}

export default Upsiag;